<template>
  <div class="chart">
    <div class="wrap" :id="'customerChart' + index"></div>
  </div>
</template>
<script>
import { reactive, toRefs, onMounted, watch } from "vue";
import * as echarts from "echarts";
export default {
  props: ["chartObj", "cindex"],
  setup(props) {
    watch(
      () => props.chartObj,
      (newVal, oldVal) => {
        console.log("111111");
        initEchart();
      }
    );
    const state = reactive({
      dateArr: [],
      index: props.cindex,
    });

    function initEchart() {
      console.log("111111");

      let item = props.chartObj;
      console.log(item);

      let option = {
        radar: {
          radius: "60%", //大小
          center: ["50%", "55%"], // 图的位置
          axisName: {
            rich: {
              a: {
                fontSize: "14",
                color: "#fff",
                align: "left",
                lineHeight: "20",
              },
              b: {
                fontSize: "14",
                color: "#188BD9",
                align: "left",
                fontWeight: "bold",
              },
            },
          },
          indicator: item.names,
        },
        series: [
          {
            name: item.title,
            type: "radar",
            areaStyle: {
              //区域渐变色
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#FE6A00",
                  },
                  {
                    offset: 1,
                    color: "#ffffff",
                  },
                ]),
              },
            },
            lineStyle: {
              color: "rgba(255,255,255,0)",
            },
            label: {
              show: true,
            },
            data: [
              {
                value: item.values,
                name: item.title,
              },
            ],
          },
        ],
      };

      let myChart = echarts.init(
        document.getElementById("customerChart" + state.index)
      );
      myChart.setOption(option);
      //监听窗口的变化，不想屏幕自适应可以不写
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }
    onMounted(() => {
      initEchart();
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>
<style lang="scss" scoped>
.chart {
  width: 100%;
  padding: 10px 0 2px;

  .title {
    color: #666;
    padding-left: 10px;
    display: flex;
    align-items: center;
    &::before {
      content: "";
      display: block;
      width: 15px;
      height: 30px;
      background: #3eb3f8;
      margin-right: 6px;
    }
  }
  div {
    text-align: center;
    color: #666;
    font-size: 14px;
  }
  .wrap {
    width: 100%;
    height: 280px;
  }
}
</style>
